// JavaScript Document
Ext.setup({
    tabletStartupScreen: 'image/tablet_startup.gif',
    phoneStartupScreen: 'image/phone_startup.gif',
    icon: 'image/icon.gif',
    glossOnIcon: false,
    onReady: function() {
        var panel, tweetPanel, itineraryPanel, tabBar, refresh1;
		
		tweetPanel = new Ext.Component({
			title:"Tweets",
			scroll: 'vertical',
			tpl:[
	            '<div id="tweet_container">',
                    '<tpl for=".">',
                        '<div class="tweet_data">',
                        '<div class="tweet_avatar">',
                            '<img width="30" height="30" src="{profile_image_url}"/>',
                        '</div>',
                        '<div class="tweet_content">',
                            '<a class="user" href="http://twitter.com/{from_user}">{from_user}</a>&nbsp;',
                            '{text}',
                        '</div>',
                        '<div class="clear"></div>',
                        '</div>',
                    '</tpl>',
                '</div>'
			]
		});
		
		itineraryPanel = new Ext.Component({
			title:"Itinerary",
			scroll: 'vertical',
			tpl:[
	            '<div id="touchpoint_container">',
                    '<tpl for=".">',
                        '<div class="touchpoint_data">',
                        '<div class="touchpoint_icon">',
                            '<img width="30" height="30" src="{touchpoint_image_url}"/>',
                        '</div>',
                        '<div class="touchpoint_content">',
                            '<h3 class="touchpoint">{touchpoint}</h3>',
                            '{text}',
                        '</div>',
                        '<div class="clear"></div>',
                        '</div>',
                    '</tpl>',
                '</div>'
			]
		});
		
			
		// update the touchpoint info in itinerary panel
		refresh_itinerary = function(){
			var tp_checkin = {
				text: "counter #5",
				touchpoint: "Check in",
				//touchpoint_image_url: "http://www.algarve-information.com/algarve/images/SpecialOffers/algarveBeach.jpg"
				touchpoint_image_url: "http://www.allthingschristmas.com/pics1/santa-claus-clothing1.jpg"
			};
			
			var tp_security = {
				text: "please go to priority line",
				touchpoint: "Security",
				touchpoint_image_url: "http://www.algarve-information.com/algarve/images/SpecialOffers/algarveBeach.jpg"
			};
			
			var tp_customs = {
				text: "go to line 3",
				touchpoint: "Customs",
				touchpoint_image_url: "http://www.allthingschristmas.com/pics1/santa-claus-clothing1.jpg"
			};
			
			var tp_waiting = {
				text: "you have 30 min of free time",
				touchpoint: "Free time",
				touchpoint_image_url: "http://www.algarve-information.com/algarve/images/SpecialOffers/algarveBeach.jpg"
			};
				
			var tp_gate = {
				text: "gate #50",
				touchpoint: "Boarding Gate",
				touchpoint_image_url: "http://www.allthingschristmas.com/pics1/santa-claus-clothing1.jpg"
			};
				
			var tpList = [tp_checkin,tp_security, tp_customs, tp_waiting, tp_gate]
			itineraryPanel.update(tpList); 
		}
		
		refresh_itinerary();
		
		panel = new Ext.TabPanel({
			fullscreen: true,
			animation: 'slide',
			items:[itineraryPanel, tweetPanel]}
		);
		
		tabBar = panel.getTabBar();
		tabBar.addDocked({
			dock:'right',
			xtype: 'button',
			ui: 'mask',
			iconMask: true,
			iconCls: 'refresh',
			stretch: false,
			align:'bottom'
		});
		
		
    }
});
